<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-10-28 14:12:05
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2024-10-28 17:11:30
 * @FilePath: \vue-project\src\components\ImagePreview.vue
 * @Description:   https://juejin.cn/post/7221075271202324538  配置项
 * 
-->
<template>
  <viewer :images="images" :options="OptionssalseImg">
    <img v-for="src in images" :key="src" :src="src" />
  </viewer>
</template>

<script setup>
import { reactive } from 'vue'
import 'viewerjs/dist/viewer.css'
import { component as Viewer } from 'v-viewer'
const props = defineProps({
  images: {
    type: Array,
    default: () => []
  }
})

const OptionssalseImg = reactive({
  zIndex: 3000,
  inline: false, // 启用内联模式
  button: true, // 在查看器右上角显示按钮
  navbar: true, // 指定导航栏的可见性
  title: false, // 指定标题的可见性和内容
  toolbar: false, // 指定工具栏及其按钮的可见性和布局
  tooltip: true, // 放大或缩小时显示带有图像比率（百分比）的工具提示
  movable: true, // 启用以移动图像
  zoomable: true, // 启用以缩放图像
  rotatable: false, // 启用以旋转图像
  scalable: true, // 启用以缩放图像。
  transition: true, // 为某些特殊元素启用CSS3转换
  fullscreen: false, // 启用以在播放时请求全屏
  keyboard: true // 启用键盘支持。
  // url: 'src', // 定义获取原始图像URL以供查看的位置
})
</script>

<style lang="scss" scoped>
</style>